<template>
  <div class="container">
    <div class="main">
      <p class="title">{{ getTimeState() }},{{ userName }}</p>
      <p class="text">您暂无管理平台权限，请联系管理员开通</p>
      <div class="icon-wrap">
        <img class="img" :src="noPermission" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import noPermission from '../../assets/image/no-permission.png'
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserInfo } from '@/stores/user'
const $store = useUserInfo()
const { userInfo } = storeToRefs($store)
const userName = computed(() => {
  return (userInfo.value as any)?.userName
})
const getTimeState = () => {
  let hoursTip = ''
  const date = new Date().getHours()
  if (date >= 0 && date < 12) {
    hoursTip = '上午好'
  } else if (date >= 12 && date < 18) {
    hoursTip = '下午好'
  } else {
    hoursTip = '晚上好'
  }
  return hoursTip
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #eff2f6;
  height: calc(100vh - 60px);
  .main {
    padding-top: 100px;
    padding-left: 156px;
  }
  .title {
    font-size: 28px;
    color: #292a2d;
    line-height: 36px;
    font-weight: 600;
  }
  .text {
    margin-top: 8px;
    font-size: 20px;
    color: #63656a;
    line-height: 28px;
    font-weight: 400;
    margin-bottom: 34px;
  }
  .icon-wrap {
    width: 300px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    background: #fff;
    overflow: hidden;
    .img {
      width: 100%;
      height: 100%;
      background-size: contain;
      object-fit: contain;
    }
  }
}
</style>
